<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>Simple example - Editor.md examples</title>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="css/editormd.css"/>
    <link rel="shortcut icon" href="../assets/images/logo.png" type="image/x-icon"/>
</head>
<body style="background-color: HighlightText">
<div id="layout">
    <header>
        <div class="btns">
            <button style="color: dimgrey;background-color: #0a001f"><h1 th:text="${title}"
                                                                         style="color: lightcyan"></h1></button>
            <button id="save" type="button" class="btn" style="color: white ;background-color: #1C005A">
                保存修改
            </button>
            <button id="watch-btn" type="button" class="btn" style="color: white ;background-color: #1C005A">Enable
                watch
            </button>
            <button id="unwatch-btn" type="button" class="btn" style="color: white ;background-color: #1C005A">Disable
                watch
            </button>
        </div>
    </header>
    <div id="test-editormd">
                <textarea id="txtarea" style="display:none;height:100%" th:text="${content}">[TOC]

#### Disabled options

- TeX (Based on KaTeX);
- Emoji;
- Task lists;
- HTML tags decode;
- Flowchart and Sequence Diagram;

#### Editor.md directory

    editor.md/
            lib/
            css/
            scss/
            tests/
            fonts/
            images/
            plugins/
            examples/
            languages/     
            editormd.js
            ...

```html
&lt;!-- English --&gt;
&lt;script src="../dist/js/languages/en.js"&gt;&lt;/script&gt;

&lt;!-- 繁體中文 --&gt;
&lt;script src="../dist/js/languages/zh-tw.js"&gt;&lt;/script&gt;
```
</textarea>
    </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/editormd.min.js"></script>
<script type="text/javascript">


    var testEditor;
    $(function () {
        testEditor = editormd("test-editormd", {
            width: "100%",
            height: 750,
            autoHeight: true,
            path: 'lib/',
            theme: "dark",
            previewTheme: "dark",
            editorTheme: "pastel-on-dark",
            codeFold: true,
            //syncScrolling : false,
            saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea
            searchReplace: true,
            //watch : false,                // 关闭实时预览
            htmlDecode: "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启
            //toolbar  : false,             //关闭工具栏
            //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
            emoji: true,
            taskList: true,
            tocm: true,         // Using [TOCM]
            tex: true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart: true,             // 开启流程图支持，默认关闭
            sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
            //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
            //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
            //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
            //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
            //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "./php/upload.php",
            onload: function () {
                console.log('onload', this);
                //this.fullscreen();
                //this.unwatch();
                //this.watch().fullscreen();

                //this.setMarkdown("#PHP");
                //this.width("100%");
                //this.height(480);
                //this.resize("100%", 640);
            }
        });
    });


    $("#watch-btn").click(function () {
        testEditor.watch();
    });

    $("#unwatch-btn").click(function () {
        testEditor.unwatch();
    });

    $('#save').click(function () {
        $.post("http://localhost:8081/mark/save",
            {
                title: '[[${title}]]',
                type: '[[${type}]]',
                updateTime: '[[${updateTime}]]',
                path: '[[${path}]]',
                content: $("#txtarea").text()
            },
            function (data, status) {
                if (status = "success") {
                    if (data) {
                        alert("保存成功");
                    } else {
                        alert("保存失败，文件已修改，请重新更新后修改");
                    }
                }
            });
    });


</script>
</body>
</html>